import { Button, Icon, Toast } from 'react-vant'
import { useState } from 'react'
import { collectedArticle, deleteCollected } from '../api/article'
export default (porps) => {
    const [loading, setLoading] = useState(false)
    const [collected, setCollected] = useState(porps.collected)
    const collectedClick = async () => {
        setLoading(true)
        try {
            if (collected) {
                const res = await deleteCollected(porps.art_id)
                setCollected(false)
                Toast('取消收藏成功')
            } else {
                const res = await collectedArticle(porps.art_id)
                setCollected(true)
                Toast('收藏成功')
            }
        } catch (error) {

        }
        setLoading(false)
    }
    if (collected) {
        return (<Button type="default" onClick={collectedClick} plain loading={loading} round><Icon name="star" className="collected" /></Button>)
    } else {
        return (<Button type="default" onClick={collectedClick} plain loading={loading} round><Icon name="star-o" /></Button>)
    }
}